<template>
  <a-card :bordered="false" :loading="loading">
    <div class="w-full">
      <a-form :model="detailData" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
        <a-row :gutter="24">
          <a-col :span="24" :pull="2">
            <a-form-item label="攻略名称" name="name">
              <a-input v-model:value="detailData.name" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="封面" name="cover">
              <upload-image
                :image-str="detailData.cover"
                :component-props="{ maxCount: 1, disabled: true }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="作者" name="creator" :wrapper-col="{ span: 16 }">
              <a-input v-model:value="detailData.creator" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="24" :pull="2">
            <a-form-item label="轮播图片" name="images">
              <upload-image
                :image-str="detailData.images"
                :component-props="{ maxCount: 5, disabled: true }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="发布时间" name="publishTime">
              <a-date-picker
                :value="formatToDateTime(detailData.publishTime, format)"
                :value-format="format"
                :format="format"
                show-time
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="审核状态" name="auditStatus" :wrapper-col="{ span: 16 }">
              <a-select
                v-model:value="detailData.auditStatus"
                class="min-w-150px"
                allow-clear
                :options="auditOptions"
                placeholder="请选择审核状态"
                disabled
              ></a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              v-if="detailData.auditStatus !== AuditStatusEnum.WAIT_AUDIT"
              label="审核人"
              name="auditor"
              :wrapper-col="{ span: 16 }"
            >
              <a-input v-model:value="detailData.auditor" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              v-if="detailData.auditStatus !== AuditStatusEnum.WAIT_AUDIT"
              label="审核时间"
              name="auditTime"
            >
              <a-date-picker
                :value="formatToDateTime(detailData.auditTime, format)"
                :value-format="format"
                :format="format"
                show-time
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              v-if="detailData.auditStatus !== AuditStatusEnum.WAIT_AUDIT"
              label="审核备注"
              name="auditRemark"
              :wrapper-col="{ span: 16 }"
            >
              <a-textarea v-model:value="detailData.auditRemark" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="24" :pull="1">
            <a-form-item
              label="介绍"
              name="introduce"
              :label-col="{ span: 3 }"
              :wrapper-col="{ span: 21 }"
            >
              <tinymce-editor
                v-model:value="detailData.introduce"
                placeholder="详细介绍"
                disabled
              ></tinymce-editor>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="创建时间" name="createTime">
              <a-date-picker
                :value="formatToDateTime(detailData.createTime, format)"
                :value-format="format"
                :format="format"
                show-time
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="更新时间" name="updateTime">
              <a-date-picker
                :value="formatToDateTime(detailData.updateTime, format)"
                :value-format="format"
                :format="format"
                show-time
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <!--          </a-row>-->
        <a-form-item :wrapper-col="{ span: 24 }">
          <div class="text-center">
            <a-space wrap>
              <a-button
                v-if="
                  $auth('travel-plan-audit') &&
                  detailData.auditStatus === AuditStatusEnum.WAIT_AUDIT
                "
                class="mr-50px"
                type="primary"
                @click="router.push(`/travelPlan/travelPlanAudit?id=${detailData.id}`)"
                >审核</a-button
              >
              <a-button
                v-if="
                  $auth('travel-plan-audit') &&
                  detailData.auditStatus !== AuditStatusEnum.WAIT_AUDIT
                "
                class="mr-50px"
                type="primary"
                @click="showModal"
                >重新审核</a-button
              >
            </a-space>
            <a-button @click="closeTab">返回</a-button>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </a-card>
  <div>
    <a-modal
      v-model:visible="popUpsOpen"
      title="确认重新审核"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
    >
      <p>{{ modalText }}</p>
    </a-modal>
  </div>
</template>

<script setup lang="tsx">
  import { ref } from 'vue';
  import { message } from 'ant-design-vue';
  import DynamicForm from '@/components/dynamicForm/index.vue';
  import useRequestDetail from '@/hooks/useRequestDetail';
  import { travelPlanApi, createTravelPlan, updateTravelPlan } from '@/api/travelPlan';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  import { ComponentsTypeEnum } from '@/enums/componentsEnum';
  import { formatToDateTime } from '@/utils/dateUtil';
  import { auditOptions, AuditStatusEnum } from '@/enums/auditEnum';

  defineOptions({
    name: 'travelPlanDetail',
  });

  const format = 'YYYY-MM-DD HH:mm';
  const router = useRouter();
  const route = useRoute();
  const tabsViewStore = useTabsViewStore();
  const popUpsOpen = ref<boolean>(false);
  const confirmLoading = ref<boolean>(false);
  const modalText = ref<string>('是否对该旅游攻略进行重新审核？');

  const { detailData, loading } = useRequestDetail({
    apiKey: travelPlanApi.travelPlanDetail,
    initParams: route?.query,
    isMount: !!Object.values(route?.query).length && !!Object.values(route?.query)[0],
  });
  const submitForm = async (params) => {
    const travelPlanId = route?.query?.id;
    const res = travelPlanId
      ? await updateTravelPlan({
          ...params,
          id: travelPlanId,
        })
      : await createTravelPlan(params);
    if (res) {
      message.success(res?.msg);
      closeTab();
    }
  };

  const closeTab = () => {
    tabsViewStore.closeCurrentTab(route);
  };

  const showModal = () => {
    popUpsOpen.value = true;
  };
  const handleOk = () => {
    modalText.value = '正在跳转审核页面...';
    confirmLoading.value = true;
    setTimeout(() => {
      popUpsOpen.value = false;
      confirmLoading.value = false;
      // 跳转到审核页面
      const travelPlanId = route?.query?.id;
      router.push(`/travelPlan/travelPlanAudit?id=${travelPlanId}`);
    }, 2000);
  };
</script>

<style></style>
